<template>
  <div>
    <n-spin :show="show" description="请稍候...">
      <n-form
        ref="formRef"
        :model="formValue"
        :rules="rules"
        :label-placement="settingStore.isMobile ? 'top' : 'left'"
        :label-width="150"
        class="py-4"
      >
        <n-grid cols="1 s:1 m:1 l:1 xl:1 2xl:1" responsive="screen">
          <n-gi span="1">
            <n-form-item label="预约日期" path="orderTimeType">
              <n-radio-group v-model:value="formValue.orderTimeType" name="orderTimeType">
                <n-space>
                  <n-radio :value="1">
                    每天
                  </n-radio>
                  <n-radio :value="2">
                    自定义
                  </n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>
            <n-form-item label=" " path="orderTimeWeekArr" v-if="formValue.orderTimeType == 2">
              <n-checkbox-group v-model:value="formValue.orderTimeWeekArr">
                <n-space>
                  <n-checkbox
                    v-for="item in weekList"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </n-space>
              </n-checkbox-group>
            </n-form-item>
          </n-gi>
<!--          <n-gi span="1">-->
<!--            <n-form-item label="定休日" path="restTimeWeekArr">-->
<!--              <n-checkbox-group v-model:value="formValue.restTimeWeekArr">-->
<!--                <n-space>-->
<!--                  <n-checkbox-->
<!--                    v-for="item in weekList"-->
<!--                    :key="item.value"-->
<!--                    :value="item.value"-->
<!--                    :label="item.label"-->
<!--                  />-->
<!--                </n-space>-->
<!--              </n-checkbox-group>-->
<!--            </n-form-item>-->
<!--            <n-form-item label=" " :path="'restTimeDate'+index" v-for="(item, index) in restDateFormArr" :key="index">-->
<!--              <n-date-picker placeholder="请选择自定义日期" v-model:formatted-value="item.date" value-format="yyyy-MM-dd" type="date" />-->
<!--              <n-button text type="success" style="margin-left: 12px" attr-type="button" @click="addItem" v-if="index == 0">-->
<!--                <template #icon>-->
<!--                  <n-icon>-->
<!--                    <PlusCircleOutlined />-->
<!--                  </n-icon>-->
<!--                </template>-->
<!--              </n-button>-->
<!--              <n-button text type="error" style="margin-left: 12px" attr-type="button" @click="removeItem(index)" v-if="index > 0">-->
<!--                <template #icon>-->
<!--                  <n-icon>-->
<!--                    <MinusCircleOutlined />-->
<!--                  </n-icon>-->
<!--                </template>-->
<!--              </n-button>-->
<!--            </n-form-item>-->
<!--          </n-gi>-->
          <n-gi span="1" v-if="formValue.orderConfirmDayType == 1">
            <n-form-item label="预约确定模式" path="orderConfirm">
              <n-input-group>
<!--                <n-input-group-label>预定</n-input-group-label>-->
<!--                <n-input-number placeholder="请输入" :min="0" :precision="0" v-model:value="formValue.orderConfirmBeforeDays" style="width: 100px" />-->
<!--                <n-input-group-label>天内手动确认，预计确认时长</n-input-group-label>-->
                <n-input-group-label>手动确认，预计确认时长</n-input-group-label>
                <n-input-number placeholder="请输入确认时长" :min="0" :precision="0" v-model:value="formValue.orderConfirmTime" style="width: 100px" />
                <n-input-group-label>分钟</n-input-group-label>
              </n-input-group>
            </n-form-item>
<!--            <n-form-item label=" " path="orderConfirm">-->
<!--              <n-input-group>-->
<!--                <n-input-group-label>大于{{ formValue.orderConfirmBeforeDays }}天自动确认</n-input-group-label>-->
<!--              </n-input-group>-->
<!--            </n-form-item>-->
          </n-gi>
          <n-gi span="1" v-if="formValue.orderConfirmDayType == 2">
            <n-form-item label="预约确定模式" path="orderConfirm">
              <n-input-group>
                <n-input-group-label>预定</n-input-group-label>
                <n-input-number placeholder="请输入" :min="0" :precision="0" v-model:value="formValue.orderConfirmBeforeDays" style="width: 100px" />
                <n-input-group-label>天前自动确认</n-input-group-label>
              </n-input-group>
            </n-form-item>
            <n-form-item label=" " path="orderConfirm">
              <n-input-group>
                <n-input-group-label>{{ formValue.orderConfirmBeforeDays }}天之后手动确认，预计确认时长</n-input-group-label>
                <n-input-number placeholder="请输入确认时长" :min="0" :precision="0" v-model:value="formValue.orderConfirmTime" style="width: 100px" />
                <n-input-group-label>分钟</n-input-group-label>
              </n-input-group>
            </n-form-item>
          </n-gi>
          <n-gi span="1">
            <n-form-item label="预约日期" path="openTimeType">
              <n-radio-group v-model:value="formValue.openTimeType" name="openTimeType">
                <n-space>
                  <n-radio :value="1">
                    按时段
                  </n-radio>
                  <n-radio :value="2">
                    按时间点
                  </n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>
            <n-form-item label="预约时段" path="amTime" v-if="formValue.openTimeType == 1">
              早市：
              <n-time-picker placeholder="请选择" format="HH:mm" v-model:formatted-value="formValue.amOpenTime" />
              <span style="margin: 0 5px">~</span>
              <n-time-picker placeholder="请选择" format="HH:mm" v-model:formatted-value="formValue.amCloseTime" />
            </n-form-item>
            <n-form-item label=" " path="pmTime" v-if="formValue.openTimeType == 1">
              晚市：
              <n-time-picker placeholder="请选择" format="HH:mm" v-model:formatted-value="formValue.pmOpenTime" />
              <span style="margin: 0 5px">~</span>
              <n-time-picker placeholder="请选择" format="HH:mm" v-model:formatted-value="formValue.pmCloseTime" />
            </n-form-item>
            <n-form-item label="时段间隔" path="timeDuration" v-if="formValue.openTimeType == 1">
              <n-radio-group v-model:value="formValue.timeDuration" name="timeDuration">
                <n-radio-button
                  v-for="item in timeDurationArr"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </n-radio-group>
              <n-input-group-label>分钟</n-input-group-label>
            </n-form-item>
            <n-form-item label="时间点" :path="'timePoints'+index" v-for="(item, index) in timePointsFormArr" :key="index" v-if="formValue.openTimeType == 2">
              <n-time-picker placeholder="请选择" format="HH:mm" v-model:formatted-value="item.time" />
              <n-button text type="success" style="margin-left: 12px" attr-type="button" @click="addTimeItem" v-if="index == 0">
                <template #icon>
                  <n-icon>
                    <PlusCircleOutlined />
                  </n-icon>
                </template>
              </n-button>
              <n-button text type="error" style="margin-left: 12px" attr-type="button" @click="removeTimeItem(index)" v-if="index > 0">
                <template #icon>
                  <n-icon>
                    <MinusCircleOutlined />
                  </n-icon>
                </template>
              </n-button>
            </n-form-item>
          </n-gi>
          <n-gi span="1">
            <n-form-item label="最大容纳预定数" path="orderMaxType">
              <n-radio-group v-model:value="formValue.orderMaxType" name="orderMaxType">
                <n-space>
                  <n-radio :value="1">
                    按时段
                  </n-radio>
                  <n-radio :value="2">
                    全局
                  </n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>
            <n-form-item :label="formValue.orderMaxType == 1 ? '时段最大容纳预定数' : '全局最大容纳预定数'" path="timeDurationMax" style="margin-bottom: 24px">
              <n-input-group>
                <n-input-number placeholder="请输入预定数" :min="0" :precision="0" v-model:value="formValue.timeDurationMax" style="width: 100px" />
                <n-input-group-label>人</n-input-group-label>
              </n-input-group>
              <template #feedback>
                填0则不限制
              </template>
            </n-form-item>
          </n-gi>
          <n-gi span="1">
            <n-form-item label="提前预约" path="advanceOrderDay" style="margin-bottom: 24px">
              <n-input-group>
                <n-input-group-label>需至少提前</n-input-group-label>
                <n-input-number placeholder="请输入天数" :min="1" :precision="0" v-model:value="formValue.advanceOrderDay" style="width: 100px" />
                <n-input-group-label>天</n-input-group-label>
              </n-input-group>
<!--              <template #feedback>-->
<!--                填0则当日可约-->
<!--              </template>-->
            </n-form-item>
          </n-gi>
          <n-gi span="1">
            <n-form-item label="最长预约" path="maxOrderDay">
              <n-input-group>
                <n-input-group-label>最长可预约</n-input-group-label>
                <n-input-number placeholder="请输入天数" :min="0" :precision="0" :show-button="false" v-model:value="formValue.maxOrderDay" style="width: 100px" />
                <n-input-group-label>天后</n-input-group-label>
              </n-input-group>
            </n-form-item>
          </n-gi>
          <n-gi span="1">
            <n-form-item label="定金支付比例" path="depositRate">
              <n-input-group>
                <n-input-number placeholder="请输入" :min="1" :max="100" v-model:value="formValue.depositRate" :show-button="false" style="width: 80px"/>
                <n-input-group-label>%</n-input-group-label>
              </n-input-group>
            </n-form-item>
          </n-gi>
        </n-grid>
        <div style="text-align: center;">
          <n-space justify="center">
            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">
              确定
            </n-button>
          </n-space>
        </div>
      </n-form>
    </n-spin>
  </div>
</template>
<script setup lang="ts">
import {onMounted, reactive, ref, watch} from "vue";
import {useProjectSettingStore} from "@/store/modules/projectSetting";
import {Edit} from "@/api/foodRestaurant";
import {useMessage} from "naive-ui";
import {useTabsViewStore} from "@/store/modules/tabsView";
import {useRouter} from "vue-router";
import {PlusCircleOutlined,MinusCircleOutlined} from "@vicons/antd";

const restDateFormArr = ref([
  {
    date: null
  }
]);
const timePointsFormArr = ref([
  {
    time: null
  }
]);
const timeDurationArr = reactive([
  {
    label: '15',
    value: 15
  },
  {
    label: '30',
    value: 30
  },
  {
    label: '60',
    value: 60
  },
  {
    label: '90',
    value: 90
  },
  {
    label: '120',
    value: 120
  },
])
const props = defineProps({
  formData: {
    type: Object || null,
    default: null,
  },
});
const emit = defineEmits(['reloadInfo']);
const router = useRouter();
const tabsViewStore = useTabsViewStore();
const show = ref(false);
const weekList = ref([
  {
    label: '周一',
    value: 1,
  },
  {
    label: '周二',
    value: 2,
  },
  {
    label: '周三',
    value: 3,
  },
  {
    label: '周四',
    value: 4,
  },
  {
    label: '周五',
    value: 5,
  },
  {
    label: '周六',
    value: 6,
  },
  {
    label: '周日',
    value: 7,
  },
])
const formValue = ref({
  type: 'operation',
  id: 0,
  orderTimeType: 1,
  orderTimeWeekArr: [],
  orderTimeWeek: '',
  restTimeWeekArr: [],
  restTimeWeek: '',
  restTimeDate: '',
  orderConfirmType: 1,
  orderConfirmDayType: 1,
  orderConfirmBeforeDays: 0,
  orderConfirmTime: 0,
  openTimeType: 1,
  amOpenTime: null,
  amCloseTime: null,
  pmOpenTime: null,
  pmCloseTime: null,
  timePoints: '',
  timePointsArr: [],
  timeDuration: 15,
  orderMaxType: 1,
  timeDurationMax: 0,
  advanceOrderDay: 0,
  maxOrderDay: 0,
  depositRate: 0,
});
const settingStore = useProjectSettingStore();
const formBtnLoading = ref(false);
const formRef = ref<any>({});
const message = useMessage();

const rules = ref({});

const removeItem = (index: number) => {
  restDateFormArr.value.splice(index, 1)
}

const addItem = () => {
  restDateFormArr.value.push({ date: null })
}

const removeTimeItem = (index: number) => {
  timePointsFormArr.value.splice(index, 1)
}

const addTimeItem = () => {
  timePointsFormArr.value.push({ time: null })
}

function confirmForm(e) {
  let restDateList = restDateFormArr.value.map((item) => {
    return item.date
  })
  restDateList = restDateList.filter(item => item !== '' && item !== null && item !== undefined && item === item);

  let timePointsList = timePointsFormArr.value.map((item) => {
    return item.time
  })
  timePointsList = timePointsList.filter(item => item !== '' && item !== null && item !== undefined && item === item);

  if(!formValue.value.depositRate || parseFloat(formValue.value.depositRate) <= 0){
    message.error('请设置定金支付比例');
    formBtnLoading.value = false;
    return false;
  }

  e.preventDefault();
  formBtnLoading.value = true;
  formRef.value.validate((errors) => {
    if (!errors) {
      formValue.value.orderTimeWeek = formValue.value.orderTimeWeekArr.join(',')
      formValue.value.restTimeWeek = formValue.value.restTimeWeekArr.join(',')
      formValue.value.restTimeDate = restDateList.join(',')
      formValue.value.timePoints = timePointsList.join(',')
      Edit(formValue.value).then((_res) => {
        message.success('操作成功');
        formBtnLoading.value = false;
        setTimeout(() => {
          if(formValue.value.id > 0){
            emit('reloadInfo');
          }else{
            // todo 关闭当前tab页，并跳转到等级列表页
            setTimeout(() => {
              tabsViewStore.closeSignal('2');
              router.push({ name: 'foodRestaurantIndex', params: {  } });
            }, 500);

          }
        }, 500);
      }).catch((err) => {
        formBtnLoading.value = false;
      });
    } else {
      formBtnLoading.value = false;
      message.error('请填写完整信息');
    }
  });
}

async function initData(data){
  if(data.restTimeDate){
    let restDateList = data.restTimeDate.split(',');
    let restDateFormInitArr = [];
    restDateList.forEach((item,index) => {
      let restDateFormItem = {
        date: item
      }
      restDateFormInitArr.push(restDateFormItem)
    })
    restDateFormArr.value = restDateFormInitArr
  }
  if(data.timePoints){
    let timePointsList = data.timePoints.split(',');
    let timePointsFormInitArr = [];
    timePointsList.forEach((item,index) => {
      let timePointsFormItem = {
        time: item
      }
      timePointsFormInitArr.push(timePointsFormItem)
    })
    timePointsFormArr.value = timePointsFormInitArr
  }
  formValue.value = {
    type: 'operation',
    id: data.id,
    orderTimeType: data.orderTimeType,
    orderTimeWeekArr: data.orderTimeWeek ? data.orderTimeWeek.split(',').map((item)=>{
      return parseInt(item)
    }) : [],
    orderTimeWeek: data.orderTimeWeek,
    restTimeWeekArr: data.restTimeWeek ? data.restTimeWeek.split(',').map((item)=>{
      return parseInt(item)
    }) : [],
    restTimeWeek: data.restTimeWeek,
    restTimeDate: data.restTimeDate,
    orderConfirmType: data.orderConfirmType,
    orderConfirmDayType: data.orderConfirmDayType,
    orderConfirmBeforeDays: data.orderConfirmBeforeDays,
    orderConfirmTime: data.orderConfirmTime,
    openTimeType: data.openTimeType ? data.openTimeType : 1,
    amOpenTime: data.amOpenTime ? data.amOpenTime : null,
    amCloseTime: data.amCloseTime ? data.amCloseTime : null,
    pmOpenTime: data.pmOpenTime ? data.pmOpenTime : null,
    pmCloseTime: data.pmCloseTime ? data.pmCloseTime : null,
    timePoints: data.timePoints ? data.timePoints : '',
    timeDuration: data.timeDuration ? parseInt(data.timeDuration) : 15,
    orderMaxType: data.orderMaxType ? data.orderMaxType : 1,
    timeDurationMax: data.timeDurationMax,
    advanceOrderDay: data.advanceOrderDay,
    maxOrderDay: data.maxOrderDay,
    depositRate: data.depositRate,
  }
}

watch(
  () => props.formData,
  async(value) => {
    await initData(value)
  }
);

onMounted(async() => {
  show.value = true;
  await initData(props.formData)

  show.value = false;
});

</script>

<style lang="less">
</style>
